<template>
  <div id="app">
    <div class="main-container">
      <!-- loading -->
      <loading :active.sync="isLoading" :height="40" :is-full-page="true" :width="40" color="#666" background-color="rgba(255,255,255,0.6)" :opacity="1">
        <div class="app-loading" slot="default"></div>
        <div class="app-loading-tips" slot="after">{{ loadingTips }}</div>
      </loading>
      <!-- 裁剪图片 -->
      <my-cropper :fixedNumber="[width, height]" @hasCropped="onCropped" :isShowCropper="isShowCropper" :cropperImg="cropperImg" />
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <ChooseCardType />
  </div>
</template>
<script>
import loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'
import * as events from './store/events'
import myCropper from './components/myCropper'
export default {
  components: {
    loading,
    myCropper,
  },
  data() {
    return {
      isLoading: false,
      loadingTips: '加载中...',
      isShowCropper: false,
      cropperImg: '',
      width: 1,
      height: 1,
      cropperCallback: '',
    }
  },
  created() {
    // 定义全局显示、隐藏loading的方法
    Vue.prototype.$showLoading = (tips) => {
      if (tips) {
        this.loadingTips = tips
      } else {
        this.loadingTips = '加载中...'
      }
      this.isLoading = true
    }
    Vue.prototype.$hideLoading = () => {
      // this.loadingTips = '加载中...'
      this.isLoading = false
    }
    Vue.prototype.$showCropper = (imgData, width, height, cb) => {
      this.cropperImg = imgData
      this.width = width
      this.height = height
      this.cropperCallback = cb
      this.isShowCropper = true
    }
  },
  mounted() {

  },
  methods: {
    onCropped(data) {
      if (data.type === 'crop') {
        this.cropperCallback(data.url)
      }
      this.isShowCropper = false
    },
  },
}
</script>
<style>
#app {
  font-size: 0.24rem;
}
.main-container {
  min-height: 100vh;
}
</style>
